/* orders.css - 订单页面特定样式 */

/* 订单卡片 */
.order-card {
  background-color: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.order-card__header {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.order-card__id {
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.6);
}

.order-card__status {
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
}

.order-card__status--pending {
  background-color: rgba(255, 152, 0, 0.1);
  color: var(--color-warning);
}

.order-card__status--processing {
  background-color: rgba(33, 150, 243, 0.1);
  color: #2196F3;
}

.order-card__status--shipped {
  background-color: rgba(76, 175, 80, 0.1);
  color: var(--color-success);
}

.order-card__status--delivered {
  background-color: rgba(45, 106, 79, 0.1);
  color: var(--color-primary);
}

.order-card__status--cancelled {
  background-color: rgba(230, 57, 70, 0.1);
  color: var(--color-danger);
}

.order-card__body {
  padding: 1rem;
}

.order-card__items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 订单商品项目 */
.order-item {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  background-color: rgba(0, 0, 0, 0.02);
  border-radius: var(--radius-md);
}

.order-item__image {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.order-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.order-item__content {
  flex: 1;
  margin-left: 1rem;
}

.order-item__name {
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.order-item__price {
  font-size: 0.875rem;
  color: var(--color-primary);
  font-weight: 600;
}

.order-item__quantity {
  display: flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-md);
  background-color: rgba(0, 0, 0, 0.05);
  font-size: 0.75rem;
}

/* 订单底部 */
.order-card__footer {
  padding: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-card__total {
  font-weight: 600;
}

.order-card__total-value {
  color: var(--color-primary);
}

.order-card__date {
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.5);
}

/* 订单详情 */
.order-details {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background-color: rgba(0, 0, 0, 0.02);
  border-radius: var(--radius-md);
  margin-top: 1rem;
}

.order-details__row {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
}

.order-details__label {
  color: rgba(0, 0, 0, 0.6);
}

.order-details__value {
  font-weight: 500;
}

/* 订单操作按钮 */
.order-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

.order-action-btn {
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.order-action-btn--primary {
  background-color: var(--color-primary);
  color: white;
}

.order-action-btn--secondary {
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* 空状态 */
.empty-orders {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  text-align: center;
}

.empty-orders__icon {
  font-size: 3rem;
  color: rgba(0, 0, 0, 0.2);
  margin-bottom: 1.5rem;
}

.empty-orders__title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.empty-orders__message {
  color: rgba(0, 0, 0, 0.5);
  margin-bottom: 1.5rem;
}
